<template>
  <div id="map">
    <!--&lt;!&ndash;      <div id="control">&ndash;&gt;-->
    <!--        <span id="control">地图名称:淮安市涟水县</span>-->
    <!--&lt;!&ndash;      </div>&ndash;&gt;-->
    <UpdateCustomInfo v-if="isShow" :isShow="isShow" @closeWin="closeWin"
                      @updateCustomInfo="updateCustomInfo"
    ></UpdateCustomInfo>
    <DetailCustomer v-if="isShowDetail" :isShowDetail="isShowDetail" :card="card"
                    @closeDetail="closeDetail"
    ></DetailCustomer>
    <div id="control">
      <div @click="saveImage" class="button button-tiny button-rounded button-primary ">生成图片
      </div>
    </div>
  </div>

</template>


<script>
let BM, map = ''
import $ from 'jquery'
/**
 * 更新客户经纬度
 */
import UpdateCustomInfo from './updateCustomInfo'
/**
 * 查看客户视图
 */
import DetailCustomer from './detailCustomInfo'
import { findCustmoerInfo, updateCustomDataInfo } from '@/api/buss/grid'

export default {
  name: 'dhjZhGrid',
  components: { UpdateCustomInfo, DetailCustomer },
  data() {
    return {
      isShow: false,
      isShowDetail: false,
      card: '',
      Jingdu: '',
      Weidu: '',
      list: []
    }
  },
  mounted() {
    this.init()

  },
  methods: {
    init() {
      this.loading = true
      findCustmoerInfo(this.queryParams).then(response => {
        this.list = response
        this.initBigmap()

      })
    },
    /**
     * 关闭窗口
     */
    closeWin() {
      this.isShow = false
      this.init()
    },
    closeDetail() {
      this.isShowDetail = false

    },
    initBigmap() {
      let this_ = this
      BM = window.BM
      BM.Config.HTTP_URL = 'http://218.2.33.94:3000'
      if (map != '') {
        map.remove()
      }
      map = BM.map('map', 'bigemap.61hv9whr', {
        crs: BM.CRS.Baidu,
        center: [33.89725112915039, 119.4434585571289],
        zoom: 16,
        zoomControl: true
      })
      map.on('contextmenu', function(e) {
        let str = 'lat:' + e.latlng.lat + ',lng:' + e.latlng.lng
        this_.Jingdu = e.latlng.lat
        this_.Weidu = e.latlng.lng
        BM.marker(e.latlng).addTo(this)
        this_.isShow = true
      })
      let marker = []

      this.list.forEach((item, i) => {
        let path = [item.luojiWeidu, item.luojiJingdu]
        let a = `<div  onClick="ShowDetail('${item.id}')">${item.name}</div>`
        let latAndLng = BM.marker(path).bindTooltip(a, {
          permanent: true,
          interactive: true
        }).openTooltip()
        let center = map.getCenter()
        let latLng = latAndLng.getLatLng()
        let distance = map.distance(center, latLng)
        //如果距离当前中心点小于500就显示
        if (distance < 10000) {
          latAndLng.addTo(map)
        }
        latAndLng.addTo(map)
        marker.push(latAndLng)
      })
      map.on('zoomend', function(e) {
        let center = map.getCenter()
        marker.forEach(item => {
          let latLng = item.getLatLng()
          let distance = map.distance(center, latLng)
          //如果距离当前中心点小于500就显示
          if (distance < 5000) {
            item.addTo(map)
          } else {
            item.remove()
          }

        })

      })
      window.ShowDetail = function(idCard) {
        this_.card = idCard
        this_.isShowDetail = true
      }

    },
    /**
     * 更新客户信息
     */
    updateCustomInfo(obj) {
      this.isShow = false
      updateCustomDataInfo(obj.params.idCard, this.Jingdu, this.Weidu).then(response => {
        if (response.code === '200' || response.code === 200) {
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败,请联系管理员')
        }
        this.init()
      })
    },
    saveImage() {
      document.getElementById('control').style.display = 'none'
      let nodeList = []
      $('#map').find('svg').each(function(index, node) {
        //获取svg的父节点
        let parentNode = node.parentNode
        //获取svg的html代码
        let svg = node.outerHTML.trim()
        //创建一个<canvas>，用于放置转换后的元素
        let canvas = document.createElement('canvas')
        //将svg元素转换为canvas元素
        canvgv2(canvas, svg)
        //设置新canvas元素的位置
        if (node.style.position) {
          canvas.style.position += node.style.position
          canvas.style.left += node.style.left
          canvas.style.top += node.style.top
        }
        let trans = getComputedStyle(node).transform.match(/\((.*)\)/)
        if (trans && trans[1]) {
          trans[1] = trans[1].split(',')
          !isNaN(parseInt(trans['1']['4'])) ? canvas.style.left += parseInt(trans['1']['4']) : true
          !isNaN(parseInt(trans['1']['5'])) ? canvas.style.top += parseInt(trans['1']['5']) : true
        }
        //删除svg元素
        parentNode.removeChild(node)
        //增加canvas元素
        parentNode.appendChild(canvas)
        nodeList.push({
          p: parentNode,
          a: node,
          r: canvas
        })
      })
      html2canvas(document.getElementById('map'), {
        backgroundColor: null,
        useCORS: true,
        allowTaint: true
      }).then(function(canvas) {
        nodeList.map(v => {
          v.p.removeChild(v.r)
          v.p.appendChild(v.a)
        })
        nodeList.length = 0
        let dataUrl = canvas.toDataURL('image/png')
        let url = dataUrl
        let a = document.createElement('a')
        let event = new MouseEvent('click')
        a.download = 'map.png'
        a.href = url
        a.dispatchEvent(event)
      })

    }

  }
}

</script>

<style scoped>
body {
  margin: 0;
  padding: 0;
}

/deep/ .bigemap-left {
  display: none;
}

/deep/ .bigemap-right {
  display: none;
}

#control {
  background-color: #eee;
  padding: 15px;
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 9;
}

.container {

}

#map {
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
}
</style>
